import React, { useState, useCallback } from 'react';
import { Modal, Form, Input, Tabs, DatePicker, Checkbox, Button } from 'antd';
// import SelectClassWindow from '@/components/SelectClassWindow/SelectClassWindow';
import styles from './style.less';

interface CreateFormProps {
  modalVisible: boolean;
  onCancel: () => void;
}

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const { modalVisible, onCancel } = props;

  const [isShowSelectClassWindow, setIsShowSelectClassWindow] = useState<boolean>(false);
  const [step, setStep] = useState<string>('1');

  const handlevisible = () => {
    onCancel();
  };

  const handleShowSelectClassGroup = () => {
    setIsShowSelectClassWindow(true);
  };
  const handleHidden = useCallback(() => {
    setIsShowSelectClassWindow(false);
  }, []);

  const handleSelectClass = useCallback((values) => {
    console.log(values);
  }, []);

  const handleNext = (value: string) => {
    setStep(value);
  };

  const handleChangeTab = (value: string) => {
    setStep(value);
  };

  return (
    <Modal
      destroyOnClose
      title="新建规则"
      visible={modalVisible}
      onCancel={handlevisible}
      footer={null}
    >
      <Tabs activeKey={step} onChange={handleChangeTab}>
        <TabPane key="1" tab="实习计划">
          <Form>
            <Form.Item label="计划名称">
              <Input placeholder="请输入内容" />
            </Form.Item>
            <Form.Item label="选择课程">
              <div className={styles.selectWrapper} onClick={handleShowSelectClassGroup} />
              <SelectClassWindow
                visible={isShowSelectClassWindow}
                onCancel={handleHidden}
                onOk={handleSelectClass}
              />
            </Form.Item>
            <Form.Item name="time" label="实习时间">
              <RangePicker style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item>
              <div className={styles.stepOneAction}>
                <Button>提交</Button>
                <Button onClick={() => handleNext('2')} type="primary" className={styles.next}>
                  下一步
                </Button>
              </div>
            </Form.Item>
          </Form>
        </TabPane>
        <TabPane key="2" tab="实习要求">
          <Form>
            <div>签到</div>
            <Form.Item label="签到方式">
              <Checkbox>上下班签到</Checkbox>
              <Checkbox>每日签到一次</Checkbox>
            </Form.Item>
          </Form>
          <Form.Item>
            <div className={styles.stepOneAction}>
              <Button>提交</Button>
              <Button onClick={() => handleNext('3')} type="primary" className={styles.next}>
                下一步
              </Button>
            </div>
          </Form.Item>
        </TabPane>
        <TabPane key="3" tab="设置项目">
          <Form>
            <Form.Item label="项目名称">
              <Input />
            </Form.Item>
            <Form.Item>
              <div  className={styles.stepOneAction}>
                <Button type="primary">发布项目</Button>
                <Button onClick={() => handleNext('1')} className={styles.cancel}>取消</Button>
              </div>
            </Form.Item>
          </Form>
        </TabPane>
      </Tabs>
    </Modal>
  );
};

export default CreateForm;
